<template>
  <div>
    <el-dialog v-bind="$attrs" :title="typeUse === '1' ? '新增文章' : '修改文章'" v-on="$listeners" @open="onOpen" @close="close">
      <!-- <div v-text="objItem"></div> -->
      <el-form ref="formRef" :model="form" :rules="rules" size="medium" >
      <el-form-item label="文章标题:" prop="title">
          <el-input v-model="form.title" placeholder="请输入文章标签" clearable 
          style="width: 514px"
         >
          </el-input>
        </el-form-item>
        <el-form-item label="文章内容:" prop="articleBody" v-model="form.articleBody">
          <vue-editor  style="width: 514px"  v-model="form.articleBody" ref="rich"></vue-editor>
          <!-- <addArticle  style="width: 514px" v-model = "valuevalue"></addArticle> -->
        </el-form-item>
    <el-form-item label="视频地址:" prop="videoURL">
          <el-input v-model="form.videoURL" placeholder="请输入视频地址" clearable  
          style="width: 525px">
          </el-input>
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="end">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import addArticle from './addArticle.vue'
import { VueEditor } from "vue2-editor";
import { add } from '../../../api/hmmm/articles'
export default {
  components: {
    addArticle,
    VueEditor
  },
  props: {
    typeUse : String,
    objItem: Object,
    showDialog: {
      type: Boolean,
      require: true
    }
  },
  data () {
    var validatePass = (rule, value, callback) => {
        if (this.$refs.rich.quill.root.innerHTML === '') {
          callback(new Error('文章内容不能为空'));
        }
          callback()
      }
    return {
      valuevalue: null,
      form: {
        title: undefined,
        articleBody: undefined,
        videoURL:undefined
      },
      rules: {
        title: [
            { required: true, message: '请输入文章标签', trigger: 'blur' },
          ],
          articleBody: [{
          required: true,
          message: '内容不能为空',
          trigger: 'blur'
        }],
      },
    }
  },
  computed: {},
  watch: {
    handler: {
      objItem (val) {
      console.log(val)
      this.form.title = val.title
      this.form.articleBody = val.articleBody
      this.valuevalue = val.articleBody
      this.form.videoURL = val.videoURL
    },
    }
  },
  created () {
    console.log(JSON.stringify(this.objItem))
  },
  mounted () {
    // console.log(JSON.stringify(this.objItem))
    this.form.title= this.objItem.title
   },
  updated () {
  },
  methods: {
    onOpen() {},
    close() {
      this.$refs['formRef'].resetFields()
      this.$emit('update:showDialog', false)
    },
    handelConfirm () {
      // alert (this.typeUse)
      this.form.articleBody = this.$refs.rich.quill.root.innerHTML.replace(/<p>/g, '').replace(/<\/p>/g, '').replace(/<br>/g, '')
        // console.log(this.form.articleBody)
        
      this.$refs['formRef'].validate(async valid => {
        if (!valid) return
        // 新文章的接口
        console.log(this.form.articleBody);
       
        // 用途  1 ： 新增  2 ： 修改
        if (this.typeUse === '2') {
          try {
            const data = await update({ id: this.objItem.id })
            console.log(data)
            // 提示成功
             this.$message.success('操作成功')
            // 刷新列表
            this.onSearch()
            } catch (error) {
              console.log(error)
              
            }
        }
        if (this.typeUse === '1') {
          console.log(1)
          
          await add(this.form)
        }
        // 提示成功
        this.$message.success('操作成功')
        // 刷新列表 ref   function
        this.$emit('successFn')
        this.close()
      })
    }
  }
}

</script>
<style>
</style>
